<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <div
    class="Mall4j newIndex-page"
    :style="{background: background, minHeight: minHeight}"
  >
    <!-- 商家的商家招牌  只有商家相关页面才显示 start -->
    <bussinessSigns
      v-if="showShopHeader"
      :shop-info="shopInfo"
      :category-list="categoryList"
      :is-collection="isCollection"
      :decorate-header="decorateHeader"
      @handle-search-data="handleSearchData"
    />
    <!-- 商家的商家招牌 end -->
    <!-- 筛选的商品 start -->
    <template v-if="screeningConfig.type && screeningConfig.type !== 'none'">
      <screening-goods
        v-if="showShopHeader"
        :screening-config="screeningConfig"
      />
    </template>

    <!-- 筛选的商品 end -->
    <!-- 装修的组件 start -->
    <template v-if="screeningConfig.type === 'none'">
      <template
        v-for="(item, index) in newConfigArr"
        :key="index"
      >
        <component
          :is="item.components"
          :current-index="index"
          :item-component="item"
        />
      </template>
    </template>
    <!-- 装修的组件 end -->
  </div>
</template>
<script setup>
import bussinessSigns from '@/components/decorate-component/business-signs/index.vue'
import { configComponentList } from '@/components/decorate-component/common/pageConfig.js'
import screeningGoods from '@/components/decorate-component/screening-goods/index.vue'

const props = defineProps({
  decoratePageIndex: {
    type: Array,
    default: () => []
  },
  shopInfo: { // 商铺信息
    type: Object,
    default: () => {}
  },
  decorateHeader: { // 商家招牌信息(供商家端使用)
    type: Array,
    default: () => []
  },
  operationType: { // 当前的类型
    type: String,
    default: () => ''
  },
  isCollection: { // 判断用户是否收藏店铺
    type: Boolean,
    default: () => false
  },
  categoryList: { // 分类
    type: Array,
    default: () => []
  }
})

const route = useRoute()

const newConfigArr = ref([])
const screeningConfig = ref({
  type: 'none'
})
const background = ref('rgba(244, 244, 244, 1)')
const minHeight = ref('63vh')

const showShopHeader = computed(() => {
  return props.operationType === 'store' && (route.path === '/shop-index' || route.path === '/select-decorate')
})

watch(() => props.decoratePageIndex, (newVal) => {
  const arr = JSON.parse(JSON.stringify(newVal))
  for (let i = 0; i < arr.length; i++) {
    if (arr[i].type === 'page_background') {
      background.value = arr[i].dataField.background
    }
    for (let j = 0; j < configComponentList.length; j++) {
      if (arr[i].type === configComponentList[j].type) {
        arr[i].components = configComponentList[j].components
        arr[i].rightConfigMessage = arr[i].dataField
      }
    }
  }
  newConfigArr.value = arr
}, {
  immediate: true,
  deep: true
})

onMounted(() => {
  minHeight.value = (window.innerHeight - 230 - 38) + 'px'
  nextTick(() => {
    window.addEventListener('resize', () => { // 监听浏览器窗口大小改变
      minHeight.value = (window.innerHeight - 230 - 38) + 'px'
    })
  })
})

// 查询
const handleSearchData = (obj) => {
  screeningConfig.value = obj
}

</script>

<style lang="scss" scoped>
.newIndex-page {
  width: 100%;
  height: 100%;
  background: #fff;
}
</style>
